<template>
  <div class="container">
    <div class="login-panel">
      <div class="panel-body">
        <div class="row title">
          后台管理
        </div>
        <div class="row">
          <el-input placeholder="用户名" v-model="userName" class="form-input" auto-complete="on" ref="user">
            <template slot="prefix">
              <svg-icon iconClass="user" class="icon icon-user" ></svg-icon>
            </template>
          </el-input>
        </div>
        <div class="row">
          <el-input type="password" placeholder="密码" v-model="userPassword" class="form-input" auto-complete="on">
            <template slot="prefix">
              <svg-icon iconClass="password" class="icon icon-pass"></svg-icon>
            </template>
          </el-input>
        </div>
        <div class="row btn-container">
          <el-button type="primary" @click="login" class="login-btn">登 录</el-button>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>联系方式：023-67024437</div>
      <div>Copyright2018, Chongqing keke Technology Co.Ltd,  All Rights Reserved</div>
    </div>
  </div>
</template>

<script>
  import SvgIcon from "../../components/SvgIcon/index.vue";
  import { base64 } from 'vux'
  export default {
    components: {SvgIcon},
    data() {
      return {
        userName: '',
        userPassword: ''
      }
    },
    methods: {
      login() {
        this.$http.post('/login', {
          username: this.userName,
          password: base64.encode(this.userPassword)
        }).then((res) => {
          if (0 === res.code) {
            this.$notify.success({
              title: '登录提示',
              message: '登录成功，即将为您跳转到首页！'
            })
            localStorage.setItem("userInfo", JSON.stringify(res.data))
            this.$router.push('/')
          } else {
            this.$notify.error({
              title: '失败',
              message: res.message
            })
          }
        })
      }
    },
    mounted(){
      this.$refs.user.focus()
    }
  }
</script>

<style lang="sass" scoped>
  .container
    position: fixed
    width: 100%
    height: 100%
    background-color: #7ba5db
    .login-panel
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      border-radius: 5px
      margin: auto
      width: 500px
      height: 300px
      background-color: rgba(255, 255, 255, 0.8)
      .row
        margin-bottom: 20px

    .panel-body
      margin: 60px

    .login-btn
      width: 100%
    .btn-container
      margin-top: 40px
    .title
      position: absolute
      width: 380px
      top: -100px
      font-size: 54px
      color: #fff
      text-align: center
      text-shadow: 5px 2px 6px rgba(0, 0, 0, 0.5)

    .icon
      width: 30px
      display: inline-block
      margin-left: -5px
      line-height: 40px
      &.icon-user
        padding-top: 8px
        font-size: 24px
      &.icon-pass
        padding-top: 10px
        font-size: 18px
    .footer
      position: absolute
      width: 100%
      bottom:  0
      color: #555
      font-size: 14px
      text-align: center
      margin-bottom: 20px
      line-height: 1.5
</style>
